<template>
	<view>
		<!-- 1，头部信息 -->
		<view class="bill-head">
			<view class="head-left">
				<view class="time">
					<text>全部</text>
				</view>
				<view class="img">
					<image :src="moreImg"></image>
				</view>
			</view>
			<view class="head-right">
				<view class="right-zc">
					<text>支出：￥{{getPrice(reducePrice)}}</text>
				</view>
				<view class="right-sr">
					<text>收入：￥{{getPrice(sumPrice)}}</text>
				</view>
			</view>
		</view>

		<!-- 2，主要信息 -->
		<view class="bill-con">
			<view class="bill-con-box" v-for="(item,index) in zdList" :key="index" @click="gotoRedDetail(item)">
				<!-- <text>{{item}}</text> -->
				<view class="con-box-left">
					<view class="left-head">
						<image v-if="item.method == '3'" :src="item.head"></image>
						<image v-else :src="defaultImg"></image>
					</view>
					<view class="center-box">
						<view class="center-box-title" style="display: flex;">
							<view>{{item.type}}</view>
							<view v-if="item.redPkgType != null && item.redPkgType == '2'">
								<image style="width: 40rpx;height: 40rpx;margin: 5rpx 0 0 10rpx;"
									:src="require('@/static/img/msg/redpkg/03.svg')"></image>
							</view>
							<!-- <text v-if="item.method == '1'">存钱</text>
						<text v-if="item.method == '2'">取钱</text>
						<text v-if="item.method == '3'">购买商品</text>
						<text v-if="item.method == '4'">卖出商品</text>
						<text v-if="item.method == '5'">发红包</text>
						<text v-if="item.method == '6'">领取红包</text>
						<text v-if="item.method == '6'">领取红包</text> -->
						</view>
						<view class="center-box-time">
							<text>{{getTime(item.createTime)}}</text>
						</view>
					</view>
				</view>
				<view class="con-box-right">
					<view class="right-price-redpkg-send" v-if="item.method == '5'">
						<view class="right-price-reduce">-{{ getPrice(parseFloat(item.price) / 100)}}</view>
						<view class="price-tips"
							v-if="item.surplusNum != null && item.totalNum != null && item.surplusNum > 0">
							领取{{item.totalNum - item.surplusNum}}/{{item.totalNum}}
						</view>
						<view class="price-tips-lw" v-else>已领完</view>
					</view>
					<view class="right-price-redpkg-send" v-else-if="item.method == '7'">
						<view class="right-price-add">+{{ getPrice(parseFloat(item.price) / 100)}}</view>
						<view class="price-tips">已退还</view>
					</view>

					<view class="right-price" v-else-if="item.method == '6'">
						<text class="right-price-add">+{{getPrice(parseFloat(item.price) / 100)}}</text>
					</view>
					<view class="right-price" v-else>
						<text class="right-price-add"
							v-if="item.method == '1' || item.method == '4' || item.method == '7'">
							+{{getPrice(parseFloat(item.price) / 100)}}
						</text>
						<text class="right-price-reduce" v-else>-{{ getPrice(parseFloat(item.price) / 100)}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 3，加载更多 -->
		<view class="bottom-tips">{{bottomTips}}</view>
	</view>
</template>

<script>
	import {
		queryPayAndIncome,
		queryPayAndIncomeByPage
	} from '@/api/http/main/my/pay.js'

	import {
		handlePrice
	} from '@/utils/price.js'

	export default {
		data() {
			return {
				moreImg: require('@/static/img/main/my/commonly/assets/bill/01.svg'),
				reducePrice: '0.00',
				sumPrice: '0.00',
				zdList: [],
				defaultImg: require('@/static/img/main/my/assets/zz.svg'),
				bottomTips: '正在加载中...',
				pageNum: 1,
				pageSize: 20,

				pageTotal: 0, //账单总条数
				pageTotalNum: 0 //账单总页数
			}
		},
		methods: {
			getPrice(price) {
				var p = handlePrice(price)
				//console.log(p)
				return p
			},
			getTime(time) {
				let now = new Date(time)

				// return now.toLocaleString().replaceAll('/', '-')

				let t = now.getTime()
				let h = now.getHours()
				let m = now.getMinutes()
				let y = now.getFullYear()
				let M = now.getMonth()
				let d = now.getDate()
				let s = now.getSeconds()
				//console.log(s)

				var yf = 0;
				if (M > 10) {
					yf = M + 1
				} else {
					yf = '0' + (M + 1)
				}

				var df = d;
				if (d < 10) {
					df = '0' + d
				}

				var hf = h;
				if (h < 10) {
					hf = '0' + h
				}

				var mf = m;
				if (m < 10) {
					mf = '0' + m
				}

				var sf = s;
				if (s < 10) {
					sf = '0' + s
				}


				var result = y + "-" + yf + '-' + df + " " + hf + ":" + mf + ":" + sf
				return result
			},
			queryNotes() {
				var that = this
				//页面初始化
				this.pageNum = 1
				this.pageSize = 20

				queryPayAndIncome('', '', this.pageNum, this.pageSize).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					//参数保存
					var busInfo = res.data.busInfo
					if (busInfo.reducePrice != null) {
						that.reducePrice = busInfo.reducePrice
					}
					if (busInfo.sumPrice != null) {
						that.sumPrice = busInfo.sumPrice
					}
					if (busInfo.list.length < that.pageSize) {
						that.bottomTips = '没有更多账单'
					}

					that.zdList = busInfo.list
					//console.log(busInfo)
				})
			},
			queryNotesByPage() {
				var that = this
				//console.log(this.pageNum)
				if (this.pageTotal !== 0 && this.pageTotalNum !== 0 && this.pageNum >= this.pageTotalNum) {
					this.bottomTips = '没有更多账单'
					return
				}
				var pageNum = this.pageNum + 1
				this.pageNum = pageNum
				queryPayAndIncomeByPage('', '', pageNum, this.pageSize).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					var busInfo = res.data.busInfo
					that.zdList = that.zdList.concat(busInfo);

					var pageInfo = res.data.pageInfo
					that.pageTotal = pageInfo.total
					that.pageTotalNum = pageInfo.num

					//that.zdList = busInfo.list
					//console.log(res.data)
				})
			},

			//5，跳转红包详情页
			gotoRedDetail(item) {
				if ((item.method == '5' || item.method == '6' || item.method == '7') && item.redPkgId != null) {
					if (item.redPkgType == '4') {
						//跳转到用户红包页
						return uni.navigateTo({
							url: '/subpkg/msg/red-pkg/red-pkg-detail/red-pkg-detail?hbId=' + item
								.redPkgId
						})
					}
					//跳转群聊红包页
					//设置没有开启
					var redPkgMsgInfo = {
						redPkgId: item.redPkgId,
						identity: '1',
						protect: '2'
					}
					return uni.navigateTo({
						url: '/subpkg/msg/red-pkg/red-pkg-group/red-pkg-group?redPkgMsgInfo=' + JSON
							.stringify(redPkgMsgInfo)
					})
				}
			}
		},
		onLoad() {
			this.queryNotes()

		},
		onReachBottom() {
			//console.log(123)
			this.queryNotesByPage()
		}
	}
</script>

<style lang="scss" scoped>
	.bill-head {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.head-left {
			height: 60rpx;
			font-size: 28rpx;

			display: flex;

			.time {
				text {
					margin: 0 20rpx;
				}

				line-height: 60rpx;
			}

			.img {
				image {
					width: 20rpx;
					height: 20rpx;
					margin-top: 20rpx;
				}
			}
		}

		.head-right {
			view {
				text {
					font-size: 28rpx;
					margin-right: 20rpx;
				}
			}

			.right-zc {
				height: 60rpx;
				line-height: 60rpx;
			}

			.right-sr {
				height: 40rpx;
				line-height: 40rpx;
			}
		}
	}

	.bill-con-box {
		width: auto;
		padding: 10rpx 20rpx;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		// margin: 10rpx 0;

		.con-box-left {
			display: flex;
		}

		&:active {
			background-color: #eee;
		}

		.left-head {
			// width: 20%;
			text-align: center;
			padding: 0 20rpx 0 0;

			image {
				margin-top: 10rpx;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}

		.center-box {
			// width: 60%;

			.center-box-title {
				line-height: 50rpx;
				font-size: 32rpx;
			}

			.center-box-time {
				line-height: 50rpx;
				font-size: 26rpx;
				color: #bfbfbf;
			}
		}

		.right-price {
			// width: 20%;
			text-align: right;
			font-size: 28rpx;
			line-height: 100rpx;

			.right-price-add {
				color: #F5C00B;
			}

			.right-price-reduce {}
		}
	}

	.right-price-redpkg-send {
		// width: 20%;

		view {
			text-align: right;
		}

		.right-price-add {
			color: #F5C00B;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
		}

		.right-price-reduce {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
		}

		.price-tips {
			height: 40rpx;
			line-height: 40rpx;
			font-size: 26rpx;
			color: #D43030;
		}

		.price-tips-lw {
			height: 40rpx;
			line-height: 20rpx;
			font-size: 26rpx;
			color: #9A9A9A;
		}
	}
</style>